import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import { formatMessage } from 'umi';
import classNames from 'classnames';
import produce from 'immer';
import styles from './index.less';

const Index = (props) => {
  const {
    type, // 日期类型 => datetime

    showTime = false,
    format = 'YYYY-MM-DD',

    disabled,
    value,
    onChange,

    rangesType = 'default', // default(默认值), forward(展望未来), back(回顾历史)
    ranges,
    dropdownClassName,
    popupStyle,
    ...rest
  } = props;

  const { showTime: newShowTime, format: newFormat, ranges: newRanges } = produce(
    {
      showTime,
      format,
      ranges,
    },
    (draftState) => {
      if (type === 'datetime') {
        draftState.showTime = {
          defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
        };
        draftState.format = 'YYYY-MM-DD HH:mm:ss';
      }
      if (type === 'datetime-now') {
        draftState.showTime = true;
        draftState.format = 'YYYY-MM-DD HH:mm:ss';
      }
      if (!draftState.ranges) {
        const commonRanges = {
          [formatMessage({ id: '第1季度' })]: [
            moment().quarter(1).startOf('quarter'),
            moment().quarter(1).endOf('quarter'),
          ],
          [formatMessage({ id: '第2季度' })]: [
            moment().quarter(2).startOf('quarter'),
            moment().quarter(2).endOf('quarter'),
          ],
          [formatMessage({ id: '第3季度' })]: [
            moment().quarter(3).startOf('quarter'),
            moment().quarter(3).endOf('quarter'),
          ],
          [formatMessage({ id: '第4季度' })]: [
            moment().quarter(4).startOf('quarter'),
            moment().quarter(4).endOf('quarter'),
          ],
        };

        if (rangesType === 'default') {
          draftState.ranges = {
            [formatMessage({ id: '今年' })]: [moment().startOf('year'), moment().endOf('year')],
            [formatMessage({ id: '本季' })]: [
              moment().startOf('quarter'),
              moment().endOf('quarter'),
            ],
            [formatMessage({ id: '本月' })]: [moment().startOf('month'), moment().endOf('month')],
            [formatMessage({ id: '本周' })]: [moment().startOf('week'), moment().endOf('week')],
            [formatMessage({ id: '今日' })]: [moment().startOf('day'), moment().endOf('day')],
            [formatMessage({ id: '去年' })]: [
              moment().subtract(1, 'years').startOf('year'),
              moment().subtract(1, 'years').endOf('year'),
            ],
            [formatMessage({ id: '前年' })]: [
              moment().subtract(2, 'years').startOf('year'),
              moment().subtract(2, 'years').endOf('year'),
            ],
            [formatMessage({ id: '30天' })]: [moment(), moment().add(30, 'days')],
            [formatMessage({ id: '60天' })]: [moment(), moment().add(60, 'days')],
            [formatMessage({ id: '90天' })]: [moment(), moment().add(90, 'days')],
            [formatMessage({ id: '180天' })]: [moment(), moment().add(180, 'days')],
            [formatMessage({ id: '1年' })]: [moment(), moment().add(1, 'years')],
            [formatMessage({ id: '2年' })]: [moment(), moment().add(2, 'years')],
            [formatMessage({ id: '3年' })]: [moment(), moment().add(3, 'years')],
            [formatMessage({ id: '5年' })]: [moment(), moment().add(5, 'years')],
            ...commonRanges,
          };
        }
        if (rangesType === 'forward') {
          draftState.ranges = {
            [formatMessage({ id: '今年' })]: [moment(), moment().endOf('year')],
            [formatMessage({ id: '本季' })]: [moment(), moment().endOf('quarter')],
            [formatMessage({ id: '本月' })]: [moment(), moment().endOf('month')],
            [formatMessage({ id: '本周' })]: [moment(), moment().endOf('week')],
            [formatMessage({ id: '今日' })]: [moment(), moment().endOf('day')],
            [formatMessage({ id: '30天' })]: [moment(), moment().add(30, 'days')],
            [formatMessage({ id: '60天' })]: [moment(), moment().add(60, 'days')],
            [formatMessage({ id: '90天' })]: [moment(), moment().add(90, 'days')],
            [formatMessage({ id: '180天' })]: [moment(), moment().add(180, 'days')],
            [formatMessage({ id: '1年' })]: [moment(), moment().add(1, 'years')],
            [formatMessage({ id: '2年' })]: [moment(), moment().add(2, 'years')],
            [formatMessage({ id: '3年' })]: [moment(), moment().add(3, 'years')],
            [formatMessage({ id: '5年' })]: [moment(), moment().add(5, 'years')],
            ...commonRanges,
          };
        }
        if (rangesType === 'back') {
          draftState.ranges = {
            [formatMessage({ id: '今年' })]: [moment().startOf('year'), moment()],
            [formatMessage({ id: '本季' })]: [moment().startOf('quarter'), moment()],
            [formatMessage({ id: '本月' })]: [moment().startOf('month'), moment()],
            [formatMessage({ id: '本周' })]: [moment().startOf('week'), moment()],
            [formatMessage({ id: '今日' })]: [moment().startOf('day'), moment()],
            [formatMessage({ id: '近30天' })]: [moment().subtract(30, 'days'), moment()],
            [formatMessage({ id: '近60天' })]: [moment().subtract(60, 'days'), moment()],
            [formatMessage({ id: '近90天' })]: [moment().subtract(90, 'days'), moment()],
            [formatMessage({ id: '近180天' })]: [moment().subtract(180, 'days'), moment()],
            [formatMessage({ id: '近1年' })]: [moment().subtract(1, 'years'), moment()],
            [formatMessage({ id: '近2年' })]: [moment().subtract(2, 'years'), moment()],
            [formatMessage({ id: '近3年' })]: [moment().subtract(3, 'years'), moment()],
            [formatMessage({ id: '近5年' })]: [moment().subtract(5, 'years'), moment()],
            ...commonRanges,
          };
        }
      }
      return draftState;
    },
  );

  const newValue = value &&
    value[0] &&
    value[1] && [moment(value[0], newFormat), moment(value[1], newFormat)];

  if (!Object.keys(props).includes('value')) {
    return 'DEPRECATED';
  }

  if (disabled && disabled.render) {
    return (
      disabled.render(newValue?.map((item) => item.format(newFormat))?.join(' ~ '), {
        value,
        format: newFormat,
      }) || <span>&nbsp;</span>
    );
  }

  return (
    <span className={classNames(styles.col24, styles.componentWrapper)}>
      <DatePicker.RangePicker
        popupStyle={{
          width: 'min-content',
          ...popupStyle,
        }}
        {...rest}
        dropdownClassName={classNames(dropdownClassName, styles.dropdownClassNameExt)}
        ranges={newRanges}
        showTime={newShowTime}
        format={newFormat}
        disabled={!!disabled}
        value={newValue}
        onChange={(dates, dateStrings) => {
          if (onChange) {
            onChange(dateStrings.map((item) => item || null));
          }
        }}
      />
    </span>
  );
};

Index.displayName = 'RangePicker';
export default Index;
